<template>
    <div style=" background-color: #f0f2f5;">
      <el-row :gutter="20">
        <!-- 快捷方式栏 -->
        <el-col :span="8">
          <el-card shadow="always" class="top-card">
            <el-container>
              <el-header><i class="el-icon-menu c-el-header"> 快 捷 方 式</i></el-header>
              <el-main style="margin: 0; padding: 0">
                <el-row style="padding-bottom: 20px">
                  <el-col :span="8" class="quick01-f">
                    <router-link to="/personal" class="quick01">
                        <i class="el-icon-user" style="font-size: 30px;width: 100%"></i>
                        <span style="display: block; padding-top: 10px">个人资料</span>
                    </router-link>
                  </el-col>
                  <el-col :span="8" class="quick02-f">
                    <router-link to="/smap" class="quick02">
                      <i class="el-icon-map-location" style="font-size: 30px; width: 100%"></i>
                      <span style="display: block; padding-top: 10px">可视化管理</span>
                    </router-link>
                  </el-col>
                  <el-col :span="8" class="quick03-f">
                    <router-link to="/commodity" class="quick03">
                      <i class="el-icon-goods" style="font-size: 30px; width: 100%"></i>
                      <span style="display: block; padding-top: 10px">商品管理</span>
                    </router-link>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                  <el-col :span="8" class="quick04-f">
                    <router-link to="/stock" class="quick04">
                      <i class="el-icon-box" style="font-size: 30px; width: 100%"></i>
                      <span style="display: block; padding-top: 10px">库存管理</span>
                    </router-link>
                  </el-col>
                  <el-col :span="8" class="quick05-f">
                    <router-link to="/analysis" class="quick05">
                      <i class="el-icon-pie-chart" style="font-size: 30px; width: 100%"></i>
                      <span style="display: block; padding-top: 10px">销售记录分析</span>
                    </router-link>
                  </el-col>
<!--                  <el-col :span="8" class="quick06-f">-->
<!--                    <router-link to="#" class="quick06">-->
<!--                      <i class="el-icon-chat-line-round" style="font-size: 30px; width: 100%"></i>-->
<!--                      <span style="display: block; padding-top: 10px">快捷功能6</span>-->
<!--                    </router-link>-->
<!--                  </el-col>-->
                </el-row>
              </el-main>
            </el-container>
          </el-card>
        </el-col>

        <!-- 待办事项栏 -->
        <el-col :span="8">
          <el-card shadow="always" class="top-card">
            <el-container>
              <el-header><i class="el-icon-s-order c-el-header"> 待 办 事 项</i></el-header>
              <el-main style="margin: 0;padding: 0;">
                <el-row>
                  <el-col :span="12">
                    <router-link to="#" class="pres-fins-link">
                      <span class="pres-fins-font-title">今日销售量</span>
                      <span class="pres-fins-font-num" style="display: block">{{tableSell.stock}}</span>
                    </router-link>
                  </el-col>
                  <el-col :span="12">
                    <router-link to="#" class="pres-fins-link">
                      <span class="pres-fins-font-title">今日的进货量</span>
                      <span class="pres-fins-font-num" style="display: block">{{tableSell.input}}</span>
                    </router-link>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    <router-link to="#" class="pres-fins-link">
                      <span class="pres-fins-font-title">今日总销售额</span>
                      <span class="pres-fins-font-num" style="display: block">{{tableSell.sell}}</span>
                    </router-link>
                  </el-col>
<!--                  <el-col :span="12">-->
<!--                    <router-link to="#" class="pres-fins-link">-->
<!--                      <span class="pres-fins-font-title">当前的总库存量</span>-->
<!--                      <span class="pres-fins-font-num" style="display: block">{{tableSell.surplus}}</span>-->
<!--                    </router-link>-->
<!--                  </el-col>-->
                </el-row>
              </el-main>
            </el-container>
          </el-card>
        </el-col>

        <!-- 版本信息栏 -->
        <el-col :span="8">
          <el-card shadow="always" class="top-card">
            <el-container>
              <el-header><i class="el-icon-warning c-el-header"> 版 本 信 息</i></el-header>
              <el-main  style="margin: 0;padding: 0;">
                <el-table  :data="tableData"  style="width: 100%">
                  <el-table-column
                    prop="date"
                    label="当前版本"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="v1.0"
                    width="180">
                  </el-table-column>
                </el-table>
              </el-main>
            </el-container>
          </el-card>
        </el-col>
      </el-row>
      <div style="background-color: #f0f2f5; padding-top: 10px;">
        <el-card >
          <!-- 地图栏 -->
          <div id="header-charts" style="width:100%; height: 300px"></div>
        </el-card>
      </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
      name: "index",
      data(){
        return{
          // 总销售额的图表
          headerCharts: null,
          tableSell:{
            stock:0,
            input:0,
            sell:0,
            surplus:0
          },
          tableData: [{
            date: '作者邮箱',
            name: 'chen-DJ@hotmail.com',
          },{
            date: '基于框架',
            name: 'vue + springboot'
          }]
        }
      },
      methods:{
        obtainHeaderTable(){
          // 显示标题，图例和空的坐标轴
          this.headerCharts = echarts.init(document.getElementById('header-charts'));
          let user = JSON.parse(window.sessionStorage.getItem("user"));
          let form = new FormData;
          let win = this;
          form.append("account", user.userName);
          this.$http.post("/api/history/obtain/account", form).then(function (response) {
            if(response.data !== null){
              win.headerCharts.setOption({
                title: {
                  text: '账户最近七日总销售额'
                },
                tooltip: {},
                legend: {

                },
                dataset:{
                  dimensions:[
                    {name: 'createTime'},
                    {name: 'coPrice'}
                  ],
                  source:  response.data
                },
                xAxis: {
                  type: 'category',
                },
                yAxis: {
                  type: 'value'
                },
                series:[
                  {name:'销售额',type: 'line'}
                ]
              });
              // 设置今日的销售信息
              win.tableSell.stock = response.data[6].coStock;
              win.tableSell.input = response.data[6].coInput;
              win.tableSell.sell = response.data[6].coPrice;
              win.tableSell.surplus = response.data[6].coSurplus;
            }
          })

        }
      },
      mounted() {
        this.obtainHeaderTable();
      }
    }
</script>

<style scoped>
  .c-el-header{
    float: left;
  }

  .top-card{
    height: 260px;
  }


  /* 快捷方式栏中对应的css样式 */
  .quick01{
    color: #5153ff;
    text-decoration: none;
  }
  .quick01:hover{
    color: white;
  }
  .quick01-f:hover{
    background: #5153ff;
  }
  .quick02{
    color: pink;
    text-decoration: none;
  }
  .quick02:hover{
    color: #ffffff;
  }
  .quick02-f:hover{
    background: pink;
  }
  .quick03{
    color: #ffd833;
    text-decoration: none;
  }
  .quick03:hover{
     color: #ffffff;
   }
  .quick03-f:hover{
    background: #ffd833;
  }
  .quick04{
    color: #51b437;
    text-decoration: none;
  }
  .quick04:hover{
    color: #ffffff;
  }
  .quick04-f:hover{
    background: #51b437;
  }
  .quick05{
    color: #afa7f7;
    text-decoration: none;
  }
  .quick05:hover{
    color: #ffffff;
  }
  .quick05-f:hover{
    background: #afa7f7;
  }
  .quick06{
    color: lightBlue;
    text-decoration: none;
  }
  .quick06:hover{
    color: #ffffff;
  }
  .quick06-f:hover{
    background: lightBlue;
  }

  /* 待办事项中的样式 */
  .pres-fins-font-num{
    color: #60a3d4;
    font-size: 50px;
  }
  .pres-fins-font-title{
    color: #8f9aa5;
  }
  .pres-fins-link{
    text-decoration: none;
  }


</style>
